<template>
	<view class="content_home">
		<NavTabbar activeTab="home"></NavTabbar>
		<view class="navbar">
			<view class="fixed">
				<!-- 设置占位 将微信小程序的状态栏高度预留出来 -->
				<!-- 时间状态 -->
				<!-- <view :style="{height: navbarStatusHeight+'px'}"></view> -->
				<!-- 胶囊按钮 -->
				<!-- <view class="navbar-content" :style="{width:navBarWidth+'px',height:navBarHeight+'px'}"></view> -->
			</view>
			<!-- 时间占位 -->
			<!-- <view :style="{height:navbarStatusHeight+'px' }"></view> -->
		</view>
		<!-- 轮播图 -->
		<view class="uni-margin-wrap">
			<swiper
				autoplay="3000"
				:indicator-dots="false"
				:disable-touch="true"
				indicator-active-color="#fff"
				indicator-color="#d9d9d9"
			>
				<swiper-item v-for="(image, index) in images" :key="index">
					<image :src="image" class="img" mode="aspectFill"></image>
				</swiper-item>
			</swiper>
		</view>
		<!-- 通告 -->
		<view class="notice-bar">
			<uni-notice-bar
				color="#007cff"
				background-color="#EAF2FF"
				showIcon
				showClose
				scrollable
				single
				text="这是通知栏! 这是通知栏! 这是通知栏!"
			></uni-notice-bar>
		</view>
		<view class="card">
			<view class="card_min">
				<view
					v-for="(i, index) in dataList1"
					@click="ondataList(index)"
					class="card_item"
					:key="index"
				>
					<image class="bor_img" :src="i.icon"></image>
					<view class="right_text">
						<p class="text">{{ i.text }}</p>
						<p class="tip">{{ i.tip }}</p>
					</view>
				</view>
			</view>
		</view>
		<view class="card2">
			<view class="title_top">自助查询</view>
			<view class="card_min">
				<view
					v-for="(i, index) in dataList2"
					@click="ondataList2(index)"
					class="card_item"
					:key="index"
				>
					<image class="bor_img" :src="i.icon"></image>
					<view class="right_text">
						<p class="text">{{ i.text }}</p>
						<p class="tip">{{ i.tip }}</p>
					</view>
				</view>
			</view>
		</view>

		<!-- 弹出申请方式-->
		<uni-popup ref="showBottom" type="bottom">
			<view class="popup_way">
				<view class="text_top_popup">
					选择类型
					<uni-icons
						class="icon"
						color="#aaa"
						@click="showBottom.close()"
						size="22"
						type="closeempty"
					></uni-icons>
				</view>
				<view class="height_list">
					<uni-list-item
						v-for="(item, index) in waylist"
						clickable
						@click="addWorkor(item)"
						:key="index"
					>
						<template v-slot:body>
							<view class="way_name">
								<span
									:style="{
										color: store.state.wayType.id == item.id ? '#007cff' : '',
									}"
								>
									{{ item.name }}
								</span>
								<uni-icons
									v-if="store.state.wayType.id == item.id"
									color="#007cff"
									type="checkmarkempty"
								></uni-icons>
							</view>
						</template>
					</uni-list-item>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script setup lang="ts">
	import {ref, onMounted} from 'vue';
	import store from '@/store/index.js';
	import apiOrder from '@/util/api/order.js';
	import {onShow, onUnload} from '@dcloudio/uni-app';
	import NavTabbar from '@/components/u-user/nav-tabbar.vue';
	import afterSaleOrderConfig from '@/config/afterSaleOrder';

	const showBottom = ref(null); //申请工单弹窗
	const navbarStatusHeight = ref(0);
	const navBarHeight = ref(0);
	const navBarWidth = ref(375);
	const images = ref([
		// 'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg',
		// 'https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg',
		'https://img.js.design/assets/img/64a7696d0aecaf4dfd713602.jpg#53c0560dc216d6c828eed56d82b0f02c',
	]);
	let waylist = ref([]);
	const dataList1 = ref([
		{
			icon: '/static/home/receipt.svg',
			text: '申请售后',
			tip: '申请售后服务',
		},
		{
			icon: '/static/home/send.svg',
			text: '在线寄修',
			tip: '返厂维修换新',
		},
	]);
	const dataList2 = ref([
		{
			icon: '/static/home/myorder.svg',
			text: '我的工单',
			tip: '查看工单详情',
		},
		{
			icon: '/static/home/mygoods.svg',
			text: '我的商品',
			tip: '查看商品信息',
		},
		{
			icon: '/static/home/query.svg',
			text: '真伪查询',
			tip: '查询商品真伪',
		},
		{
			icon: '/static/home/knowledge.svg',
			text: '知识中心',
			tip: '更多相关',
		},
	]);
	onUnload(() => {
		uni.hideLoading();
	});
	// 基础服务
	const ondataList = async (val) => {
		switch (val) {
			case 0:
				await getApplyWay();
				showBottom.value.open();
				break;
			case 1:
				uni.showToast({
					title: '正在维护中，敬请期待...',
					duration: 2000,
					icon: 'none',
				});
				break;
		}
	};
	// 自助查询
	// 0==售后申请 1==在线寄修 2==防伪查询 3==知识中心
	const ondataList2 = async (val) => {
		switch (val) {
			case 0:
				uni.navigateTo({
					url: '/pages/order/index',
				});
				break;
			case 1:
				uni.navigateTo({
					url: '/pages/goods/goods',
				});
				break;
			case 2:
				uni.navigateTo({
					url: '/pages/home/truthSearch',
				});
				break;
			case 3:
				uni.showToast({
					title: '正在维护中，敬请期待...',
					duration: 2000,
					icon: 'none',
				});
				break;
		}
	};
	// 获取报单模块列表
	const getApplyWay = async () => {
		let data = {
			limit: 0,
			name: '',
			page: 0,
		};
		uni.showLoading({
			title: '加载中...',
		});
		await apiOrder
			.getOrderModuleList(data, store.state.wayType.factoryId || '')
			.then((res) => {
				if (res.code == 20000) {
					waylist.value = res.data.rows;
				}
			});
		uni.hideLoading();
	};
	// 选择申请方式
	const addWorkor = (item) => {
		const factoryId = store.state.wayType.factoryId;
		store.commit('setWayType', {
			id: item.id,
			name: item.name,
			type: item.type, //1安装
			collectCustomerGoodsPrice: item.collectCustomerGoodsPrice,
			moduleCode: item.id === afterSaleOrderConfig.moduleId ? item.id : '',
			factoryId,
		});
		showBottom.value.close();
		if (
			factoryId === afterSaleOrderConfig.factoryId &&
			item.id === afterSaleOrderConfig.moduleId
		) {
			uni.navigateTo({
				url: '/pages/home/addAfterSaleOrder',
			});
			return;
		}
		if (!store.state.wayType.factoryId) {
			store.commit('setorderGoodsTypes', []);
			store.commit('setchackFaultList', []);
			store.commit('setchackFaultItem', {id: null});
			store.commit('setcheckBrandItem', {id: null});
			store.commit('setcheckClassifyItem', {id: null});
			store.commit('setappointmentTime', null);
			store.commit('setUserOrder', {
				address: '', //客户详细地址
				area: '', //地址-县/区
				city: '', //地址-市
				helpOtherCreateOrder: false, //	是否代他人建单：0-否，1-是
				name: '', //客户姓名
				otherPhone: '', //其他电话
				phone: '', //客户手机号
				province: '', //地址-省
				town: '', //地址-镇
				userId: null,
			});
			store.commit('setWayType', {
				id: store.state.wayType.id,
				name: store.state.wayType.name,
				type: store.state.wayType.type, //1安装
				factoryId: store.state.wayType.factoryCode || '',
			});
			uni.navigateTo({
				url: '/pages/home/add',
			});
			return;
		}
		uni.navigateTo({
			url: '/pages/home/way/way',
		});
	};
	onMounted(() => {
		const info = uni.getSystemInfoSync();
		navbarStatusHeight.value = info.statusBarHeight;
		// 根据微信小程序的右上侧的胶囊样式 设置导航栏内容的高度
		// 条件编译 以下三个不支持胶囊样式
		// #ifndef H5 || APP-PLUS || MP-ALIPAY
		const menuInfo = uni.getMenuButtonBoundingClientRect();
		// 导航栏内容的高度 = (胶囊底部的高度 - 状态栏的高度) + (胶囊顶部的高度 - 状态栏的高度)
		navBarHeight.value =
			menuInfo.bottom -
			info.statusBarHeight +
			(menuInfo.top - info.statusBarHeight);
		// 导航栏内容的宽度  除开胶囊按钮左侧的内容宽度
		navBarWidth.value = menuInfo.left;
		// #endif
	});
</script>

<style lang="scss" scoped>
	.content_home {
		background-color: #f6f7fa;
		height: 100vh;
		padding-bottom: 80rpx;
		:deep(.notice-bar) {
			// padding-top: 24rpx;
		}

		.uni-margin-wrap {
			:deep(swiper) {
				height: 420rpx;
			}

			:deep(uni-swiper) {
				height: 420rpx;
			}

			.img {
				width: 100%;
				height: 100%;
				display: block;
			}
		}

		.card {
			margin: 14rpx;
			border-radius: 20rpx;

			:deep(.uni-grid-item__box) {
				align-items: center;
				justify-content: center;
			}

			.title_top {
				font-size: 28rpx;
				font-weight: bold;
				color: #000;
				padding: 24rpx 24rpx 10rpx;
			}

			.card_min {
				display: flex;
				flex-wrap: wrap;
				width: calc(100% - 0rpx);

				.card_item {
					width: calc(50% - 30rpx);
					display: flex;
					align-items: center;
					padding: 50rpx 24rpx;
					margin: 10rpx;
					border-radius: 10rpx;
					background-color: #fff;
					box-sizing: border-box;
					box-shadow: 0 16rpx 25rpx rgba(233, 239, 245, 1);

					&:nth-child(1) {
						margin-right: 20rpx;
					}

					&:nth-child(2) {
						margin-left: 20rpx;
					}

					.bor_img {
						width: 100rpx;
						height: 100rpx;
					}

					.right_text {
						font-size: 28rpx;
						margin-left: 24rpx;

						.text {
							color: #383838;
							font-size: 30rpx;
							font-weight: bold;
						}

						.tip {
							color: #808080;
							font-size: 24rpx;
							margin-top: 8rpx;
						}
					}
				}
			}
		}

		.card2 {
			margin: 24rpx;
			background-color: #fff;
			border-radius: 10rpx;
			box-shadow: 0 16rpx 25rpx rgba(233, 239, 245, 1);

			:deep(.uni-grid-item__box) {
				align-items: center;
				justify-content: center;
			}

			.title_top {
				font-size: 28rpx;
				font-weight: bold;
				color: #000;
				padding: 24rpx 24rpx 10rpx;
			}

			.card_min {
				display: flex;
				flex-wrap: wrap;
				margin: 10rpx;
				width: calc(100% - 20rpx);
				padding-bottom: 20rpx;

				.card_item {
					width: calc(50% - 40rpx);
					display: flex;
					align-items: center;
					padding: 30rpx 24rpx;
					margin: 20rpx;
					border-radius: 10rpx;
					background-color: #f8faff;
					box-sizing: border-box;

					.bor_img {
						width: 70rpx;
						height: 70rpx;
					}

					.right_text {
						font-size: 28rpx;
						margin-left: 24rpx;

						.text {
							color: #383838;
							font-size: 30rpx;
							font-weight: bold;
						}

						.tip {
							color: #808080;
							font-size: 24rpx;
							margin-top: 8rpx;
						}
					}
				}
			}
		}

		.popup_way {
			height: 60vh;
			border-radius: 20rpx 20rpx 0 0;
			background-color: #fff;
			padding-bottom: 100rpx;

			.text_top_popup {
				text-align: center;
				font-size: 32rpx;
				padding: 20rpx 0;
				font-weight: bold;

				.icon {
					position: absolute;
					right: 40rpx;
					font-weight: 500;
				}
			}

			.height_list {
				height: 100%;
				overflow: auto;

				.way_name {
					width: 100%;
					display: flex;
					justify-content: space-between;
					align-items: center;
					font-size: 28rpx;
				}
			}
		}

		:deep(.uni-popup) {
			z-index: 999;
		}
	}
</style>
<style lang="scss">
	.navbar {
		.fixed {
			position: fixed;
			top: 0;
			left: 0;
			z-index: 99;
			width: 100%;
			// background-color: $uni-color-primary;
		}
	}
</style>
